<template>
  <!-- 联合巡检：机器人调配 -->
  <div class="robotdeployment-h bigTableStyle">
    <div class="robotdeployment-index">
      <div class="fromed">
        <div class="robotdeployment-return">
          <div>
            <span class="icon"></span> 机器人调配
          </div>
          <div class="top-back" v-to-router="'/jointInspection'"></div>
        </div>
        <el-form
          class="filter-box"
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="1.5rem"
        >
          <el-row :gutter="15">
            <el-col :span="5">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="变电站名称:" prop="time">
                    <el-select
                      v-model="formData.substation"
                      filterable
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                    >
                      <el-option
                        v-for="(item, index) in SubstationList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="机器人名称:" prop="jqrmc">
                    <el-input
                      v-model="formData.jqrmc"
                      placeholder
                      type="text"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="计划名称:" prop="jqrmc">
                    <el-input
                      v-model="formData.planmc"
                      placeholder
                      type="text"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="计划转运起始站:" prop="source">
                    <el-select
                      v-model="formData.startSubstation"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in SubstationList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="计划转运终点站:" prop="source">
                    <el-select
                      v-model="formData.endSubstation"
                      placeholder="请选择"
                      clearable
                      :style="{width: '100%'}"
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in SubstationList"
                        :key="index"
                        :label="item.name"
                        :value="item.code"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="5">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="转运起始时间:" prop="kssj">
                    <!-- <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.startTime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>-->
                    <el-date-picker
                      type="date"
                      v-model="formData.startTime"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="5">
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="转运结束时间:" prop="jssj">
                    <!-- <el-date-picker
                      :style="{width: '100%'}"
                      v-model="formData.endTime"
                      value-format="yyyy-MM-dd"
                      type="daterange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    ></el-date-picker>-->
                    <el-date-picker
                      type="date"
                      v-model="formData.endTime"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="3">
              <div class="robotdeployment-index-btn">
                <el-button
                  class="table-query"
                  type="primary"
                  @click="submitForm"
                  icon="el-icon-search"
                >查询</el-button>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="robotdeployment-index-btn">
                <el-button type="primary" @click="addlistevent">新建</el-button>
                <el-button type="primary" @click="editlistevent">修改</el-button>
                <el-button type="primary" @click="delelsitevent">删除</el-button>
                <el-button type="primary" @click="checkCalendar">查看日历</el-button>
                <el-button type="primary" @click="exportevent">导出</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="bottom-border"></div>
      <div class="tableed" v-nodata="nodata">
        <el-table
        border
          :data="newTableData"
          height="100%"
          :row-class-name="tableRowClassName"
          style="width: 100%;height:100%;"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="myIndex" label="序号" width="80"></el-table-column>
          <el-table-column prop="SSDSMC" width="150" label="所属地市" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="BDZMC" width="150" label="变电站名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="JQRMC" width="120" label="机器人名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="BH" width="80" label="编号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="LX" width="80" label="类型" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="SCCJ" width="100" label="生产厂家" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="XH" width="80" label="型号" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="JHMC" width="130" label="计划名称" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column
            prop="JHZYQDZMC"
            width="150"
            label="计划转运起始站"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="JHZYZDZMC"
            width="150"
            label="计划转运终点站"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="SJZYQDZMC"
            width="150"
            label="实际转运起始站"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            prop="SJZYZDZMC"
            width="150"
            label="实际转运终点站"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="ZYQSSJ" width="150" label="转运起始时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ZYJSSJ" width="150" label="转运结束时间" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="ZYGCJL" width="150" label="转运过程记录" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="YCQKMS" width="150" label="异常情况描述" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="BZ" width="150" label="备注" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
      </div>
      <div class="paged elPaginationStyle">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pages.page"
          :page-sizes="[10, 20, 30]"
          :page-size="pages.pageSize"
          layout="total,prev, pager, next,sizes, jumper"
          :total="pages.totalSize"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="新增"
      top="20vh"
      :visible.sync="addlist"
      width="65%"
      :before-close="addlistClose"
    >
      <addlistmodules @close="addlistClose" v-if="addlist" />
    </el-dialog>
    <el-dialog
      title="修改"
      top="20vh"
      :visible.sync="editlist"
      width="65%"
      :before-close="editlistClose"
    >
      <editlistmodules :tableSelect="tableSelect" @close="editlistClose" v-if="editlist" />
    </el-dialog>
    <el-dialog
      title="日历"
      top="10vh"
      :visible.sync="Calender"
      width="80%"
      :before-close="CalenderClose"
    >
      <Calender @close="CalenderClose" v-if="Calender" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import addlistmodules from "./modules/addlistmodules.vue";
import editlistmodules from "./modules/editlistmodules.vue";
import Calender from "./modules/Calender.vue";
import { JointInspectionModule } from "@/store/modules/JointInspection";
//loadsh
import lodash from "lodash";
@Component({ components: { addlistmodules, editlistmodules, Calender } })
export default class robotdeployment extends Vue {
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = JointInspectionModule.LocalCityList || [];
    return SubstationList;
  }
  nodata = false;
  //搜索框from表单数据
  private formData: any = {
    substation: "", // 变电站ID
    planmc: "", // 计划名称
    startSubstation: "", // 计划转运起始站
    endSubstation: "", // 计划转运终点站
    jqrmc: "", // 机器人名称
    startTime: "", // 转运起始时间
    endTime: "", // 转运结束时间
  };

  // 前一个表单数据
  oldForm = {};
  jclxOptions: { [key: string]: any } = [];
  checkData = (rule: any, value: any, callback: any) => {
    var value1 = new Date(this.formData.startTime);
    var value2 = new Date(this.formData.endTime);
    // console.log(value1, value2, 22222222222222222)
    if (value1 && value2) {
      // this.$message.closeAll();
      if (value1.getTime() > value2.getTime()) {
        this.$message({
          message: "开始时间不能晚于结束时间",
          type: "warning",
        });
      } else {
        callback();
      }
    } else {
      callback();
    }
  };
  rules = {
    time: [],
    alarm: [],
    source: [],
    name: [],
    kssj: [
      {
        validator: this.checkData,
        trigger: "blur",
      },
    ],
    jssj: [
      {
        validator: this.checkData,
        trigger: "blur",
      },
    ],
  };
  $refs!: {
    elForm: any;
  };
  // 勾选的消息
  tableSelect: any = [];
  // 表格选择事件
  id = "";
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
    var time = [];
    if (this.tableSelect && this.tableSelect.length > 0) {
      time[0] = this.tableSelect[0].ZYQSSJ.trim();
      time[1] = this.tableSelect[0].ZYJSSJ.trim();
      this.tableSelect[0].startTime = time;
    }

    this.id = "";
    this.tableSelect.map((item: any) => {
      this.id = this.id + "," + item.ID;
    });
    this.id = this.id.substr(1);
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //返回按钮
  goBack() {
    window.history.back();
  }

  // 提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }
  // 查询
  submitForm() {
    // console.log("CompanyList:",this.CompanyList)
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log("this.formData:", this.formData);
      this.pages.page = 1;
      this.queryAuxRealtimeList();
    });
  }
  // 刷新
  resForm() {
    this.pages.page = 1;
    this.formData = {
      substation: "", // 变电站ID
      planmc: "", // 计划名称
      startSubstation: "", // 计划转运起始站
      endSubstation: "", // 计划转运终点站
      jqrmc: "", // 机器人名称
      startTime: "", // 转运起始时间
      endTime: "", // 转运结束时间
    };
    this.queryAuxRealtimeList();
  }
  // table表格相关事件数据
  private tableData = [];
  get newTableData() {
    let tableData = lodash.cloneDeep(this.tableData);
    if (tableData.length > 0) {
      let page = this.pages.page;
      let size = this.pages.pageSize;
      tableData.map((v, i) => {
        v.myIndex = (page - 1) * size + i + 1;
        return v;
      });
    }
    return tableData;
  }
  //分页数据事件相关
  pages: { pageSize: number; page: number; totalSize: number } = {
    pageSize: 20,
    page: 1,
    totalSize: 0,
  };
  //   分页
  handleSizeChange(val: any) {
    // console.log(`每页 ${val} 条`);
    this.pages.pageSize = val;
    this.pages.page = 1;
    this.queryAuxRealtimeList();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.queryAuxRealtimeList();
  }

  // 监听查询条件变化
  @Watch("formData", { immediate: true, deep: true })
  setCdType(newForm) {
    let oldForm: any = this.oldForm;
    // 如果变电站id变化
    if (newForm.station !== oldForm.station) {
      // this.formData.jclx = "";
      this.queryTypes();
    }
    this.oldForm = lodash.cloneDeep(newForm);
  }

  // 查询测点类型
  queryTypes() {
    let form = this.formData;
    let params = {
      // station: form.station,
      type: "fk",
    };
    (this as any).$services
      .queryTypes({ data: params })
      .then((result: any) => {
        this.jclxOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 查询当前表格数据
  queryAuxRealtimeList() {
    // console.log("this.formData:", this.formData);
    let form = {
      bdzid: this.formData.substation, // 变电站ID
      jhmc: this.formData.planmc, // 计划名称
      jhzyqdz: this.formData.startSubstation, // 计划转运起始站
      jhzyzdz: this.formData.endSubstation, // 计划转运终点站
      jqrmc: this.formData.jqrmc, // 机器人名称
      page: this.pages.page, // 第几页
      rows: this.pages.pageSize, // 每页多少条
      sccj: "", // sccj
      zyqssj: this.formData.startTime == null ? "" : this.formData.startTime, // 转运起始时间（始）
      // zyqssjto: this.formData.startTime == null ? "" : this.formData.startTime[1], // 转运起始时间（至）
      zyjssj: this.formData.endTime == null ? "" : this.formData.endTime, // 转运结束时间（始）
      // zyjssjto: this.formData.endTime == null ? "" : this.formData.endTime[1], // 转运结束时间（至）
    };
    // console.log("this.formData:",this.formData);
    // console.log("form:",form);
    (this as any).$services
      .getRobotTpList({ data: form, method: "get" })
      .then((result: any) => {
        // console.log("result:", result);
        let data = result.data;
        this.tableData = data.rows;
        this.pages.totalSize = data.total;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  pickerOptions = {
    shortcuts: [
      {
        text: "最近一周",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近一个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit("pick", [start, end]);
        },
      },
      {
        text: "最近三个月",
        onClick(picker: any) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit("pick", [start, end]);
        },
      },
    ],
  };
  resetForm() {
    this.$refs.elForm.resetFields();
  }
  addlistevent() {
    this.addlist = true;
  }
  editlistevent() {
    let selectTabLen = this.tableSelect.length;
    switch (selectTabLen) {
      case 1:
        this.editlist = true;
        break;
      default:
        this.$message({ type: "warning", message: "请选择一条修改！" });
        break;
    }
  }
  //删除
  delelsitevent() {
    if (this.tableSelect.length > 0) {
      this.$confirm("是否删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          (this as any).$services
            .delTpList({ data: { id: this.id } })
            .then((result: any) => {
              //  console.log(result);
              if (result.code === 200) {
                this.$message({
                  showClose: true,
                  message: result.message,
                  type: "success",
                });
                this.queryAuxRealtimeList();
              } else {
                this.$message({
                  showClose: true,
                  message: result.message,
                  type: "warning",
                });
              }
            })
            .catch((err: any) => {
              console.log(err);
              this.$message({
                type: "error",
                message: `${err.msg}`,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    } else {
      this.$message({
        // showClose: true,
        message: "至少选择一条",
        type: "warning",
      });
    }
  }

  checkCalendar() {
    this.Calender = true;
  }

  exportevent() {
    var form: any = {};
    form.bdzid = this.formData.substation || "";
    form.jhmc = this.formData.planmc || "";
    form.jhzyqdz = this.formData.startSubstation || "";
    form.jhzyzdz = this.formData.endSubstation || "";
    form.jqrmc = this.formData.jqrmc || "";

    form.sccj = "";
    form.zyjssj = "";
    form.zyjssjto = "";
    form.zyqssj = "";
    form.zyqssjto = "";
    let url = `${
      (window as any).VUE_APP_BASEURL
    }/zdxs/jqrtp/getDcTpList?bdzid=${form.jhid}&jhmc=${form.jhmc}&jhzyqdz=${
      form.jhzyqdz
    }&jhzyzdz=${form.jhzyzdz}&jqrmc=${form.jqrmc}`;
    // console.log('url:',url);
    window.open(url, "_top");
  }

  handleEdit(scope: any) {
    // console.log(scope.row);
  }

  //弹窗相关
  addlist = false;
  addlistClose() {
    this.addlist = false;
    this.queryAuxRealtimeList();
  }

  editlist = false;
  editlistClose() {
    this.editlist = false;
    this.queryAuxRealtimeList();
  }
  Calender = false;
  CalenderClose() {
    this.Calender = false;
  }

  mounted() {
    // 查询表格数据
    this.queryAuxRealtimeList();
  }
}
</script>


<style lang="scss" scoped>
.robotdeployment-h {
  width: 100%;
  height: 100%;
  padding: 0 0.24rem;
  .robotdeployment-index {
    width: 100%;
    height: 100%;
    &-btn {
      display: flex;
      justify-content: flex-end;
    }

    .fromed {
      .robotdeployment-return {
        height: 0.3rem;
        margin-top: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > div {
          font-size: 0.18rem;
        }
        .icon {
          width: 0.16rem;
          height: 0.16rem;
          background: url("../../../../assets/img/JointInspection/xjjh_subtitle_icon.png")
            no-repeat center center;
          background-size: 100% 100%;
          display: inline-block;
        }
      }
    }
    .filter-box {
      height: 1.04rem;
      width: 100%;
      margin-top: 0.15rem;
    }
    .bottom-border {
      width: 100%;
      height: 2px;
      background: linear-gradient(
        90deg,
        rgba(30, 60, 166, 1),
        rgba(255, 255, 255, 1),
        rgba(32, 62, 168, 1)
      );
      margin: 0.1rem 0;
    }
    .tableed {
      height: calc(100% - 2.64rem);
    }
    .paged {
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .iconfont {
    cursor: pointer;
  }
  .table-query {
    width: 1.4rem;
  }
}
</style>
<style lang="scss">
.robotdeployment-h {
  .el-select {
    width: 100%;
  }
  .el-date-editor.el-input {
    width: 100%;
  }
}
</style>

